@menubg: #1f1f1f;

.layout {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .headerBar {
    position: fixed;
    top: 0;
    right: 0;
    left: 48px;
    width: calc(100% - 48px);
    height: 50px;
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .logo {
      width: 144px;
      // height: 52px;
      overflow: hidden;
      text-align: center;
      > img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
      }
    }
    .btn {
      font-size: 18px;
      // transition: transform 0.3s;
    }
  }
  .head.collapsed {
    justify-content: center;
    .logo,
    .app_name {
      display: none;
    }
    .btn {
      transform: rotate3d(0, 1, 0, 180deg);
    }
  }
  .extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    .title {
      padding-left: 4px;
      font-size: 18px;
      white-space: nowrap;
    }
    &.collapsed {
      justify-content: center;
      .title {
        display: none;
      }
    }
  }

  :global {
    .ant-pro-basicLayout-content {
      margin: 0;
      overflow: auto;
    }
    .ant-pro-sider {
      z-index: 10;
      color: #fff;
      background: @menubg;
      &-extra {
        background: var(--base);
      }
      .ant-menu.ant-menu-dark {
        background: transparent;
      }
      // loading
      .ant-spin.ant-spin-lg.ant-spin-spinning {
        .ant-spin-dot.ant-spin-dot-spin {
          font-size: 20px;
          .ant-spin-dot-item {
            width: 9px;
            height: 9px;
          }
        }
      }
      .ant-pro-sider-logo {
        height: 52px;
        padding: 0 16px;
      }
      // 标题
      .ant-pro-menu-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        .anticon {
          width: 24px;
          margin-right: 4px !important;
          font-size: 18px !important;
        }
      }
      // 选中
      .ant-menu-submenu-active {
        color: #fff !important;
      }
      .ant-menu-item {
        overflow-x: auto;
        text-overflow: clip;
        scrollbar-width: none !important;
      }
      .ant-menu-item-selected {
        position: relative;
        display: inline-flex;
        background: rgba(24, 160, 251, 0.1) !important;
        &::after {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-left: 2px solid var(--base);
          content: '';
        }
      }
      // 三级
      .ant-menu-root > li > ul {
        background-color: #2a2a2a;
      }
      // 四级
      .ant-menu-root > li > ul > li > ul {
        background-color: #343434;
      }
    }

    .ant-pro-sider.ant-layout-sider-collapsed .ant-pro-sider-logo {
      padding: 12px 16px;
    }
    // 标题缩进
    .ant-pro-sider:not(.ant-layout-sider-collapsed) {
      .ant-pro-menu-item {
        display: inline-block;
        padding-left: 16px;
      }
      div + ul .ant-pro-menu-item {
        padding-left: 44px;
      }
    }
  }
}

html {
  :global {
    .ant-menu-submenu-inline {
      .ant-menu-submenu-title {
        padding-left: 18px !important;
        .menu-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          color: #fff;
          .anticon {
            font-size: 18px;
          }
        }
      }
    }
    .ant-menu-submenu.ant-menu-submenu-popup {
      transition: none;
      .ant-menu {
        background: @menubg !important;
      }
      .ant-menu-item {
        border-left: 2px solid transparent !important;
        // &-selected {
        //   position: relative;
        //   background: rgba(24, 160, 251, 0.1) !important;
        //   border-left: 2px solid var(--base) !important;
        // }
      }
      .ant-menu-submenu-active {
        color: #fff;
      }
    }
    .ant-menu-root .ant-menu-item-selected {
      position: relative;
      background: rgba(24, 160, 251, 0.1) !important;
      // border-left: 2px solid var(--base) !important;
    }
    // 二级高亮设置
    .ant-menu-root > li > ul {
      // 二级选中设置
      > .ant-menu-item-selected {
        background-color: #000 !important;
        > a,
        a:hover {
          color: #1e7ce8 !important;
        }
      }
      > li {
        .ant-menu-submenu-title {
          .maqueen {
            padding-left: 26px;
          }
        }
        > ul {
          // 三级
          > li.ant-menu-item-only-child {
            padding-left: 20px !important;
          }
          // 三级
          > li {
            > .ant-menu-submenu-title {
              padding-left: 32px !important;
            }
            // 四级
            > ul {
              > li {
                padding-left: 14px !important;
              }
            }
          }
        }
      }
      // 二级open设置
      > .ant-menu-submenu-open.ant-menu-submenu-selected,
      > .ant-menu-submenu-selected {
        // open
        > .ant-menu-submenu-title {
          > span {
            color: #1e7ce8 !important;
          }
          > .ant-menu-submenu-arrow {
            opacity: 1 !important;
          }
          > .ant-menu-submenu-arrow::after,
          .ant-menu-submenu-arrow::before,
          .ant-menu-submenu-arrow:hover::after,
          .ant-menu-submenu-arrow:hover::before {
            background-color: #1e7ce8 !important;
          }
        }
        // item select
        > ul > .ant-menu-item-selected > a {
          color: #1e7ce8 !important;
        }
      }
    }
    .ant-menu-root.ant-menu-inline .ant-menu-item {
      height: 50px;
      margin: 0;
      padding: 5px 0;
    }
  }
}
